<template>
    <div class="container">
        <div class="header">
            <h1>药品信息录入系统</h1>
            <p>基于拼音缩写的智能药品搜索与录入</p>
        </div>

        <div class="instructions">
            <p>💡
                使用说明：在药品名称输入框中输入药品的商品名、通用名或拼音缩写，然后从下拉列表中选择正确的药品</p>
            <p>✨ 例如：输入 "blw" 可以搜索到 "波立维 (硫酸氢氯吡格雷片)"</p>
        </div>

        <el-form class="form-container" label-width="100px">
            <div class="input-group">
                <label for="quantity">药品数量：</label>
                <el-input-number
                    id="quantity"
                    v-model="quantity"
                    :min="1"
                    :max="1000"
                    controls-position="right"
                    size="large"
                    placeholder="请输入药品数量">
                </el-input-number>
            </div>

            <div class="input-group">
                <label for="drug-name">药品名称：</label>
                <el-autocomplete
                    id="drug-name"
                    v-model="drugName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入药品名称或拼音缩写（如：blw）"
                    clearable
                    @select="handleSelect"
                    @clear="clearSelection"
                    size="large"
                >
                    <template #default="{ item }">
                        <div class="suggestion-item">
                            <div class="trade-name">{{ item.tradeName }}</div>
                            <div class="generic-name">{{ item.genericName }}</div>
                            <div class="pinyin">拼音缩写: {{ item.pinyin }}</div>
                        </div>
                    </template>
                </el-autocomplete>
            </div>

            <div class="submit-btn">
                <el-button type="primary" size="large" @click="submitForm">提交药品信息</el-button>
            </div>
        </el-form>

        <div class="drug-info" v-if="selectedDrug">
            <h3>已选药品信息</h3>
            <p><span class="highlight">商品名称：</span>{{ selectedDrug.tradeName }}</p>
            <p><span class="highlight">通用名称：</span>{{ selectedDrug.genericName }}</p>
            <p><span class="highlight">拼音缩写：</span>{{ selectedDrug.pinyin }}</p>
            <p><span class="highlight">数量：</span>{{ quantity }}</p>
        </div>

        <div class="footer">
            <p>药品信息录入系统 © 2023 - 基于Vue 3和Element Plus构建</p>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';

// 表单数据
const quantity = ref(1);
const drugName = ref('');
const selectedDrug = ref(null);

// 模拟药品数据
const drugs = ref([
    {id: 1, tradeName: '拜阿司匹灵', genericName: '阿司匹林肠溶片', pinyin: 'baspl'},
    {id: 2, tradeName: '立普妥', genericName: '阿托伐他汀钙片', pinyin: 'lpt'},
    {id: 3, tradeName: '波立维', genericName: '硫酸氢氯吡格雷片', pinyin: 'blw'},
    {id: 4, tradeName: '络活喜', genericName: '苯磺酸氨氯地平片', pinyin: 'lhx'},
    {id: 5, tradeName: '格华止', genericName: '盐酸二甲双胍片', pinyin: 'ghz'},
    {id: 6, tradeName: '诺和龙', genericName: '瑞格列奈片', pinyin: 'nhl'},
    {id: 7, tradeName: '代文', genericName: '缬沙坦胶囊', pinyin: 'dw'},
    {id: 8, tradeName: '蒙诺', genericName: '福辛普利钠片', pinyin: 'mf'},
    {id: 9, tradeName: '可达龙', genericName: '盐酸胺碘酮片', pinyin: 'kdl'},
    {id: 10, tradeName: '拜新同', genericName: '硝苯地平控释片', pinyin: 'bxt'},
    {id: 11, tradeName: '倍他乐克', genericName: '酒石酸美托洛尔片', pinyin: 'btlk'},
    {id: 12, tradeName: '信必可', genericName: '布地奈德福莫特罗粉吸入剂', pinyin: 'xbk'}
]);

// 过滤药品列表的方法
const querySearch = (queryString, cb) => {
    const results = queryString
        ? drugs.value.filter(drug =>
            drug.pinyin.toLowerCase().includes(queryString.toLowerCase()) ||
            drug.tradeName.toLowerCase().includes(queryString.toLowerCase()) ||
            drug.genericName.toLowerCase().includes(queryString.toLowerCase())
        )
        : drugs.value;
    // 格式化建议项显示
    const formattedResults = results.map(drug => ({
        ...drug,
        value: `${drug.tradeName} (${drug.genericName})`
    }));
    cb(formattedResults);
};

// 处理药品选择
const handleSelect = (item) => {
    selectedDrug.value = item;
    drugName.value = item.value;
};

// 清空选择
const clearSelection = () => {
    selectedDrug.value = null;
};

// 提交表单
const submitForm = () => {
    if (!selectedDrug.value) {
        ElMessage.warning('请先选择药品');
        return;
    }

    ElMessage.success(`提交成功！药品: ${selectedDrug.value.tradeName}, 数量: ${quantity.value}`);
};
</script>

<style scoped>
.container {
    width: 90%;
    max-width: 800px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    padding: 35px;
    margin: 30px auto;
}

.header {
    text-align: center;
    margin-bottom: 35px;
}

.header h1 {
    color: #409EFF;
    margin-bottom: 12px;
    font-size: 32px;
}

.header p {
    color: #909399;
    margin-top: 0;
    font-size: 16px;
}

.form-container {
    display: grid;
    gap: 28px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group label {
    font-weight: 600;
    color: #606266;
    font-size: 16px;
}

.footer {
    margin-top: 35px;
    text-align: center;
    color: #909399;
    font-size: 14px;
}

.drug-info {
    margin-top: 35px;
    padding: 25px;
    background: linear-gradient(135deg, #f9fafc 0%, #e6effd 100%);
    border-radius: 12px;
    border-left: 5px solid #409EFF;
    transition: all 0.3s ease;
}

.drug-info h3 {
    margin-top: 0;
    color: #409EFF;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 12px;
}

.highlight {
    color: #409EFF;
    font-weight: 600;
}

.instructions {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 30px;
    border-left: 5px solid #67c23a;
    font-size: 15px;
}

.suggestion-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.suggestion-item .trade-name {
    font-weight: 600;
    color: #303133;
    font-size: 16px;
}

.suggestion-item .generic-name {
    color: #606266;
    font-size: 14px;
    margin: 5px 0;
}

.suggestion-item .pinyin {
    color: #909399;
    font-size: 13px;
}

.el-input-number {
    width: 100%;
}

.el-autocomplete {
    width: 100%;
}

.submit-btn {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 600px) {
    .container {
        padding: 20px;
        width: 95%;
    }

    .header h1 {
        font-size: 26px;
    }
}
</style>
